<template>
	<div class="ranking-list table-theme">
		<head-title title="营销--VR评论列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"></div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<p class="data-number">数据总数：{{ total }}</p>
			<el-table :data="wList">
				<el-table-column label="序号" align="center" prop="comment_id"></el-table-column>
				<el-table-column label="VR id" align="center" prop="vr_id"></el-table-column>
				<el-table-column label="用户id" align="center" prop="user_id"></el-table-column>
				<el-table-column label="昵称" align="center" prop="user_name"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.portrait"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="评论内容" align="center" prop="content"></el-table-column>
				<el-table-column label="评论时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="reply(scope.row.comment_id)">回复</el-button>
						<el-button type="primary" size="mini" @click="seeComment(scope.row.child_comment)">查看回复</el-button>
						<el-button type="danger" size="mini" @click="delComment(scope.row.comment_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>


			<!-- 回复弹框 -->
			<el-dialog title="回复" :visible.sync="commentDialog" center :modal-append-to-body="false" width="680px">
				<el-form :model="commentForm" :rules="commentFormRules" ref="commentForm" label-width="120px">
					<el-form-item label="内容:" prop="content">
						<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="commentForm.content"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="commentDialog = false">取 消</el-button>
					<el-button type="primary" @click="confirmClick('commentForm')">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 回复列表弹框 -->
			<el-dialog title="回复列表" :visible.sync="replyDialog" center :modal-append-to-body="false" width="680px">
				<el-card class="box-card" v-for="(item,index) in replyList" :key="index">
					<div slot="header" class="clearfix">
						<span>{{item.user_name}}( ID：{{item.user_id}} )</span>
					</div>
					<div class="text item">
						{{item.content}}
					</div>
				</el-card>
				<span slot="footer" class="dialog-footer">
					<el-button @click="replyDialog = false">关 闭</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover
		},
		data() {
			return {
				vr_id: '',
				wList: [],
				total: 0,totalData: 0, 
				page: 0,
				commentDialog: false,
				commentForm: {
					content: '',
					comment_id: ''
				},
				commentFormRules: {
					content: [{
						required: true,
						message: '请输入内容'
					}]
				},
				replyList: [],
				replyDialog: false
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.vr_id = this.$route.query.vr_id;
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					vr_id: this.vr_id,
					examine_status: 1
				};

				this.$http(this.$ApiList.VrCommentList, data).then(res => {
					this.wList = res.datas.list;
					this.total = res.datas.count
				});
			},
			// 刷新
			refreshPage() {
				this.page = 1;
				this.init();
			},
			reply(comment_id) {
				this.commentForm.content = ''
				this.commentForm.comment_id = comment_id
				this.commentDialog = true
			},
			delComment(comment_id) {
				let data = {
					comment_id: comment_id
				};
				this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$http(this.$ApiList.VrCommentDelete, data).then(res => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.page = 1;
							this.init()
						});
					})
					.catch(() => {});
			},
			confirmClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.UpReply, this.commentForm).then(res => {
							this.$layer.msg(res.datas);
							this.commentDialog = false
							this.init()
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			seeComment(list) {
				this.replyList = list
				this.replyDialog = true
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.ranking-list {
	}
</style>
